<template>
  <div>
    <!-- 下拉框 自定义搜索 -->
    <a-select
      showSearch
      mode="tabs"
      v-model="val"
      style="width: 100%"
      :filterOption="filterOption"
    >
      <!-- optionFilterProp="id" -->
      <a-select-option v-for="(item) in this.selectData" :key="item.name" :value="item.id"
      >
        {{ item.name }}
      </a-select-option>
    </a-select>
  </div>
</template>

<script>
export default {
  data(){
    return {
      val:'1',
      selectData:[],
      data:[
        { name:'上海',id:'1' },
        { name:'北京',id:'2' },
        { name:'深圳',id:'3' },
        { name:'广州',id:'4' },
        { name:'重庆',id:'5' },
        { name:'南京',id:'6' },
      ]
    }
  },
  created(){
    this.selectData = this.data
  },
  methods: {
    filterOption(input, option){
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    }
  },

}
</script>

<style>

</style>